<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'学历'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="137">
            <div>
                <div class="analyItem">
                    <p class="analyItemTit tx-center">学历</p>
                    <div class="analyItemCon">
                        <p class="col-md-12 mb20">
                            <el-radio-group v-model="radio">
                                <el-radio :label="14">硕士</el-radio>
                                <el-radio :label="15">重本</el-radio>
                                <el-radio :label="16">普本</el-radio>
                                <el-radio :label="17">专科</el-radio>
                            </el-radio-group>
                        </p>
                        <p class="col-md-12">
                            <span class="cLightGray pr8 col-md-1">备注:</span>
                            <span class="col-md-8">
                                <!-- type="textarea" autosize  -->
                                <el-input v-model="inputXue" placeholder="输入备注"></el-input>
                            </span>
                            <span class="col-md-22 ">
                                <el-button class="fr" @click="confirm(1,inputXue)" type="primary"> {{eduFlag ?'确定':'修改'}}</el-button>
                            </span>
                        </p>
                        <!-- <span style="top:20%" :class="['circlemark', XLsecList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']">{{XLsecList.isPresence==null?'待':'完'}}</span> -->
                        <span style="top:20%" :class="['circlemark', eduFlag ? 'circlemark-purple' : 'circlemark-lightGreen']">{{eduFlag ?'待':'完'}}</span>
                    </div>
                </div>
                <div class="analyItem">
                    <p class="analyItemTit tx-center">专业</p>
                    <div class="analyItemCon">
                        <p class="col-md-12">
                            <span class="cLightGray pr8">预留</span>
                        </p>
                        <p class="col-md-12">
                            <span class="cLightGray pr8 col-md-1">备注:</span>
                            <span class="col-md-8">
                                <el-input v-model="inputZhuan" placeholder="输入备注"></el-input>
                            </span>
                            <span class="col-md-22">
                                <el-button class="fr" @click="confirm(2,inputZhuan)" type="primary"> {{majorFlag ?'确定':'修改'}}</el-button>
                            </span>
                        </p>
                        <!-- <span style="top:20%" :class="['circlemark', XLzhuanList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']">{{XLzhuanList.isPresence==null?'待':'完'}}</span> -->
                        <span style="top:20%" :class="['circlemark', majorFlag ? 'circlemark-purple' : 'circlemark-lightGreen']">{{majorFlag?'待':'完'}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layerRtb-footer">
            <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                    <p class="col-md-10">
                        <span class="col-md-1 cLightGray ">备注</span>
                        <span class="col-md-8 lh20">
                            <el-input v-model="inputHandel" placeholder="请输入处理备注..."></el-input>
                        </span>
                    </p>
                    <!-- <span style="top:20%" :class="['circlemark', XLList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']">{{XLList.isPresence==null?'待':'完'}}</span> -->
                    <span style="top:20%" :class="['circlemark', saveFlag ? 'circlemark-purple' : 'circlemark-lightGreen']">{{saveFlag ?'待':'完'}}</span>

                </div>
            </div>
            <div class="tx-center">
                <el-button @click="confirm(3,inputHandel)" type="primary">保存</el-button>
            </div>
        </div>

    </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { saveTrickData } from '../../Resources/Api'
export default {
    data () {
        return {
            eduFlag: true, // 学历按钮
            majorFlag: true, // 专业按钮
            saveFlag: true, // 按钮判断
            XLList: {},
            XLsecList: {},
            XLzhuanList: {},
            inputHandel: '',
            radio: 0,
            chuRadio: 0,
            inputXue: '',
            inputZhuan: ''
        }
    },

    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.XLList = this.$route.query.XLList
        if (this.XLList.isPresence === null) {
            this.saveFlag = true
        } else {
            this.saveFlag = false
        }

        // 获取当前页数据
        this.getDate()
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        getDate () {
            // 综合备注
            if (this.XLList.isPresence !== null) {
                this.inputHandel = this.XLList.isPresence[0].remake
            }
            this.XLList.stageMediumType.forEach(element => {
                if (Number(element.exclusiveId) === 6) {
                    this.$nextTick(() => {
                        this.XLsecList = element
                        if (this.XLsecList.isPresence === null) {
                            this.eduFlag = true
                        } else {
                            this.eduFlag = false
                        }
                    })
                    // 学历选项
                    element.stageSmallType.forEach(item => {
                        if (item.isPresence !== null) {
                            this.radio = item.exclusiveId
                            this.chuRadio = item.exclusiveId
                        } else {
                            this.inputXue = ''
                        }
                    })
                    // 学历备注
                    if (element.isPresence !== null) {
                        this.inputXue = element.isPresence[0].remake
                    }
                } else {
                    // 专业备注
                    this.$nextTick(() => {
                        this.XLzhuanList = element
                        console.log(this.XLzhuanList.isPresence)
                        if (this.XLzhuanList.isPresence === null) {
                            this.majorFlag = true
                        } else {
                            this.majorFlag = false
                        }
                    })
                    console.log()
                    if (element.isPresence !== null) {
                        this.inputZhuan = element.isPresence[0].remake
                    }
                    // element.stageSmallType.forEach(item => {
                    //     if (item.isPresence !== null) {
                    //     } else {
                    //         this.inputZhuan = ''
                    //     }
                    // })
                }
            })
        },
        confirm (flg, input) {
            if (flg === 1) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (Number(this.radio) === 0) {
                    layer.msg('尚未选择')
                    return
                }
                if (this.radio !== this.chuRadio) {
                    this.saveTrickData(this.chuRadio, null, 0)
                }
                this.saveTrickData(this.radio, null)
                this.saveTrickData(6, input)
                this.eduFlag = false
                this.setUpDatePlate()
            }
            if (flg === 2) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                this.saveTrickData(7, input)
                this.majorFlag = false
                this.setUpDatePlate()
            }
            if (flg === 3) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (!this.eduFlag && !this.majorFlag) {
                    this.saveTrickData(1, input)
                    this.setUpDatePlate()
                    this.saveFlag = false
                } else {
                    layer.msg('尚未完善信息')
                }
                console.log(this.XLzhuanList.isPresence)
                // if (this.XLzhuanList.isPresence !== null && this.XLsecList.isPresence !== null) {
                //     this.saveTrickData(1, input)
                //     this.setUpDatePlate()
                //     this.saveFlag = false
                // } else {
                //     layer.msg('尚未完善信息')
                // }
            }
        },
        saveTrickData (val, input, deflg) {
            saveTrickData({
                user_card_no: this.leftInfo.cardNo, // 卡号
                userName: this.leftInfo.userName, // 姓名
                remake: input, // 备注
                operatorCard: this.userInfo.as_cardNo, // 操作人
                operatorName: this.userInfo.as_userName, // 操作人姓名
                exclusiveId: val, // 专属ID
                delFlag: deflg


            }).then(res => {
                if (res.data.StatusCode === 0) {
                    layer.msg('保存成功')
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    watch: {
        leftInfo () {
        },
        $route () {

        }
    }
}
</script>
